<!--
 * @Author: ykr
 * @Date: 2023-12-29 15:20:47
 * @LastEditors: ykr
 * @LastEditTime: 2024-01-09 17:04:07
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\service\supervision\attachmentUpload.vue
-->
<template>
  <view class="page">
    <view class="main-content" v-for="(item,index) in fileList" :key="index">
      <u-row>
        <u-col :span="1.2" style="text-align:right;">
          <u-icon name="attach" width="42" height="48" color="#2979ff" size="34"></u-icon>
        </u-col>
        <u-col :span="6.8">
          <span @click="previewImage(item.gfiPath, [])">{{ item.name }}</span>
        </u-col>
        <u-col :span="3" style="text-align:right;color:#3381ff">
          <span @click="upload(item)">点击下载</span>
        </u-col>
        <u-col :span="1">
          <u-icon name="download" color="#2979ff" size="30" @click="upload(item)"></u-icon>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
import certificateService from "@/service/certificate/certificate.service.js";
import queryService from "@/service/check/query.service"
const IMG_LIST = ['image/gif', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/png',];
export default{
  props: ['materialUuid'],
  data(){
    return {
      fileList:[],
      picTypeList: IMG_LIST, // 图片类型集合
    };
  },
  created(){
    this.init();
  },
  methods:{
    init(){
      certificateService.goFiles(this.materialUuid, "").then(res => {
        this.picList = res.data;
        this.fileList = this.picList.map((f) => {
          f.uid = f.fileId = f.gfiId;
          f.name = f.gfiAlis + (this.showUploader ? `（${f.gfiUser}）` : '');
          f.status = 'done';
          f.size = f.gfiSize;
          f.url = queryService.previewImg(f.gfiId);
          if (this.picTypeList.join(',').indexOf(f.gfiSuffix) != -1) {
            f.type = 'image/' + f.gfiSuffix;
          }
          return f;
        });
        console.log(this.fileList);
      })
    },
    upload(item){
      this.$modal.downloadFile(item.url,item.name);
    },
    previewImage(url, current) {
			// #ifdef H5-DINGDING
			this.$deviceApi.previewImage(url, current).then(res => {
				console.log('调用成功');
			}).catch(err => {
				console.log('调用失败');
			})
			// #endif
			// #ifndef H5-DINGDING
			this.$u.toast('H5不支持预览图片');
			// #endif
		}
  },
}
</script>

<style scoped lang="scss">
	.page{
    background-color: #f2f2f3;
    padding: 8rpx 8rpx 0rpx 8rpx;
    margin: 30rpx 0;
    width: 100%;
  }
  .main-content{
    padding: 20rpx 0 20rpx 0;
    border-bottom: 2rpx solid $u-border-color;
  }
  .main-content:last-child{
    padding: 20rpx 0 20rpx 0;
  }
</style><!--
  * @Author: ykr
  * @Date: 2023-12-29 15:20:47
  * @LastEditors: ykr
  * @LastEditTime: 2024-01-02 10:52:15
  * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\supervision\attachmentUpload.vue
 -->
 <template>
   <view class="page">
     <view class="main-content" v-for="(item,index) in fileList" :key="index">
       <u-row>
         <u-col :span="1.2" style="text-align:right;">
           <u-icon name="attach" width="42" height="48" color="#2979ff" size="34"></u-icon>
         </u-col>
         <u-col :span="6.8">
           <span @click="previewImage(item.gfiPath, [])">{{ item.name }}</span>
         </u-col>
         <u-col :span="3" style="text-align:right;color:#3381ff">
           <span @click="upload(item)">点击下载</span>
         </u-col>
         <u-col :span="1">
           <u-icon name="download" color="#2979ff" size="30" @click="upload(item)"></u-icon>
         </u-col>
       </u-row>
     </view>
   </view>
 </template>
 
 <script>
 import certificateService from "@/service/certificate/certificate.service.js";
 import queryService from "@/service/check/query.service"
 const IMG_LIST = ['image/gif', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/png',];
 export default{
   props: ['materialUuid'],
   data(){
     return {
       fileList:[],
       picTypeList: IMG_LIST, // 图片类型集合
     };
   },
   created(){
     this.init();
   },
   methods:{
     init(){
       certificateService.goFiles(this.materialUuid, "").then(res => {
         this.picList = res.data;
         this.fileList = this.picList.map((f) => {
           f.uid = f.fileId = f.gfiId;
           f.name = f.gfiAlis + (this.showUploader ? `（${f.gfiUser}）` : '');
           f.status = 'done';
           f.size = f.gfiSize;
           f.url = queryService.previewImg(f.gfiId);
           if (this.picTypeList.join(',').indexOf(f.gfiSuffix) != -1) {
             f.type = 'image/' + f.gfiSuffix;
           }
           return f;
         });
         console.log(this.fileList);
       })
     },
     upload(item){
       this.$modal.downloadFile(item.url,item.name);
     },
     previewImage(url, current) {
       // #ifdef H5-DINGDING
       this.$deviceApi.previewImage(url, current).then(res => {
         console.log('调用成功');
       }).catch(err => {
         console.log('调用失败');
       })
       // #endif
       // #ifndef H5-DINGDING
       this.$u.toast('H5不支持预览图片');
       // #endif
     }
   },
 }
 </script>
 
 <style scoped lang="scss">
   .page{
     background-color: #f2f2f3;
     padding: 8rpx 8rpx 0rpx 8rpx;
     margin: 30rpx 0;
     width: 100%;
   }
   .main-content{
     padding: 20rpx 0 20rpx 0;
     border-bottom: 2rpx solid $u-border-color;
   }
   .main-content:last-child{
     padding: 20rpx 0 20rpx 0;
   }
 </style>